<script setup lang="ts">
import {onMounted, reactive} from 'vue'
import {showToast, showImagePreview, showNotify} from 'vant'
import {zipPlugin} from "../../../utils/plugin";
import TestView from "./components/TestView.vue"

const data = reactive({
  resourceName: '',
  currentImage: '',
  fileList: [],
  savePath: '',
  testValue: '11111'
})

const showContent = (item) => {
  data.currentImage = item.filePath
}

const getBasePath = async () => {
  // @ts-ignore (define in dts)
  let basePath = await zipPlugin.getDefaultPathRender()
  // console.log("getBasePath", basePath);
  data.savePath = `${basePath}\\doc`
}

//调用main进程的选择zip并解析文件的方法
const chooseZipFileFn = async () => {
  if (!data.savePath) {
    showNotify({message: '请选择解压文件保存路径！'});
    return
  }
  // @ts-ignore (define in dts)
  let {zipFileName, fileList} = await zipPlugin.chooseUnZipFileRender(data.savePath, true)
  data.resourceName = zipFileName
  data.fileList = fileList ? fileList : []
}

const selectSavePath = async () => {

  let path = await zipPlugin.selectDirPathRender()
}

const updateTestValue = () => {
  data.testValue = '20'
}

onMounted(() => {
  getBasePath()
})
</script>

<template>
  <div class="config-page ver-layout">
    <div class="page-title">平台配置</div>
    <div class="mode-item ver-layout">
      <div class="hor-layout-center">
        <div class="mode-flag"></div>
        <div class="mode-title hor-layout-center">
          <div>导读资源包更新</div>
          <van-button @click="selectSavePath">选择解压路径</van-button>
          <van-tag style="margin-left: 10px;" type="primary" size="medium">解压后保存路径：【{{ data.savePath }}】</van-tag>
        </div>
      </div>
      <div class="mode-content hor-layout-center">
        <div>更新导读资源包：（仅上传.Zip文件）</div>
        <van-button style="margin-left: 10px;" size="small" type="success" @click="chooseZipFileFn">上传文件</van-button>
        <div class="resource-name">{{ data.resourceName }}</div>
      </div>
      <van-list style="margin-top: 20px">
        <van-cell v-if="data.fileList.length" title="解压文件列表："></van-cell>
        <van-cell v-for="item in data.fileList" :key="item" :title="item.name" @click="showContent(item)"/>
      </van-list>
      <div class="image-preview">
        <img class="image-view" :src="data.currentImage"/>
        <p class="margin-10">{{ data.currentImage }}</p>
      </div>
    </div>
    <div class="test-layout ver-layout">
      <test-view v-model="data.testValue"></test-view>
      <div>父组件testValue值：{{ data.testValue }}</div>
      <van-button size="small" class="fit-content top-10" @click="updateTestValue">修改testValue的值</van-button>
    </div>
  </div>
</template>

<style lang="less">
.config-page {
  width: 100%;

  .page-title {
    margin: auto;
    margin-top: 20px;
    width: fit-content;
    font-size: 26px;
  }

  .mode-item {
    margin: 20px 10%;
    padding: 20px;
    background: #f2f2f2;

    .mode-flag {
      width: 8px;
      height: 30px;
      background: #4aa3ff;
    }

    .mode-title {
      margin-left: 20px;
      font-size: 18px;
      font-weight: bold;
    }

    .mode-content {
      margin-top: 20px;
      margin-left: 40px;

      .upload-btn {
        margin-left: 30px;
      }

      .resource-name {
        margin-left: 20px;
      }
    }

    .image-preview {
      margin: 15px 0px;

      .image-view {
        height: 200px;
      }
    }
  }

  .test-layout {
    margin: 20px;
    padding: 20px;
    background: #999999;
  }
}
</style>
